<template>
    <div class="JCJY_wraper">

        <div class="header_wrap">
            <div class="header">
                <div class="header_title">{{ $t('p6.tab3.title') }}</div>
                <div class="icon"></div>
            </div>

            <div class="desc">
                {{ $t('p6.tab3.desc') }}
            </div>

        </div>

        <div class="carousel" v-for="(value, key) in dataList">
            <div class="title">
                <span v-if="language === 'jp'">
                    {{ handleColumn(key).label | formatCateName }}
                </span>
                <span v-else>
                    {{ handleColumn(key).label }}
                </span>
            </div>

            <div class="box">
                <swiper class="swiper_wrap" ref="mySwiper" :options="swiperOptions" style="height: 150px">
                    <swiper-slide v-for="item in dataList[key]" class="wrap">
                        <div class="item" v-if="item.type == 1">
                            <el-image fit="contain" :src="$baseImageUrl+item.fileUrl" :preview-src-list="[$baseImageUrl+item.fileUrl]"></el-image>
                        </div>
                        <div class="item" v-else-if="item.type == 2">
                            <el-image class="video" fit="fill" :src="$baseImageUrl+item.videoPoster" @click="handlePlayVideo(item.fileUrl)"></el-image>
                        </div>
                    </swiper-slide>

                    <!-- <div class="swiper-button-prev" slot="button-prev"></div>
                    <div class="swiper-button-next" slot="button-next"></div> -->
                </swiper>
            </div>
        </div>

        <XgPlayer ref="xgPlayer" :url="videoUrl"></XgPlayer>


    </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css'
import XgPlayer from '@/views/components/XgPlayer';
import { getStore } from '@/libs'
export default {
    name: "Slider",
    components: {
        Swiper,
        SwiperSlide,
        XgPlayer
    },
    data() {
        return {
            params: null,

            swiperOptions: {
                // autoplay: true,
                // loop: true,
                // slidesPerView: 'auto',
                // loopedSlides: 5,
                // delay: 1000,
                // slidesPerGroupAuto: true,

                slidesPerView: 'auto',//重要的
                freeMode : true,//是否滑动
                paginationClickable: true,
                spaceBetween: 10,//间距

                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
            },

            videoUrl: null,

            dataList: [],
            dicts: [],

            language: 'zh'
        }
    },

    created() {
        this.language = getStore({name: 'language'});
        this.params = this.$route.query
        this.handleGetDict()
    },
    methods: {

        /**
         * 播放器
         * @param {*} item
         */
         handlePlayVideo(videoUrl) {
            this.videoUrl = videoUrl
            this.$refs.xgPlayer.init()
        },

        /**
         * 获取字典数据
         */
        handleGetDict() {
            this.$http({
                url: '/api/system/sysdict/getDictByCodeList',
                method: 'POST',
                data: {code: 'JCJY'}
            }).then(res => {
                this.dicts = Object.assign({}, res.data)
                this.getGroupDataList()
            })
        },

        handleColumn(key) {
            let dicts = Object.values(this.dicts)
            let dict = dicts.filter(item => {
                if(item.value === key) {
                    return item
                }
            })
            return dict[0]
        },

        /**
         * 获取数据
         */
        async getGroupDataList() {
            let terminal = 1
            let country = 1
            // 切换语言7
            if(getStore({name: 'language'}) === 'jp') {
                country = 2;
            }
            const res = await this.$http({
                url: '/api/siteenterprise/listMap',
                method: 'GET',
                params: {sortColumns: 'sort,cate', sortType: 'desc'},
            })
            if (this.ResultMessage(res, false)) {
                this.dataList = res.data || []
            }
        }
    },
    filters: {
        formatCateName(value) {
            if (value === '年会') {
                return '年次会議';
            } else if (value === '庆典') {
                return '祝賀会';
            } else if (value === '生日会') {
                return '誕生日会';
            } else if (value === '体育运动') {
                return 'スポーツイベント';
            } else if (value === '团建') {
                return 'チームビルディング';
            } else {
                return '-';
            }
        }
    }
};
</script>


<style lang="scss" scope>
.JCJY_wraper{
    color: #333333;
    padding: 0 20px;
    .header_wrap{
        .header{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: 40px;
            .header_title{
                font-size: 28px;
                font-weight: bold;
            }
            .icon{
                margin-top: 5px;
                display: block;
                width: 35px;
                height: 5px;
                background-color: #98000A;
                border-top: 2px solid #FCA400;
            }
        }

        .desc{
            display: flex;
            justify-content: center;
            margin-top: 40px;
            padding: 0 20px;
        }
    }


    .carousel{
        margin: 20px 0;

        .title{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            font-weight: bold;
        }
        .box{
            height: 220px;
            display: flex;
            align-items: center;
            background-image: url('../../assets/images/wi/jcjy.png');
            background-size: 100% 100%;
            .swiper_wrap{
                .swiper-slide {
                    text-align: center;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: -webkit-flex;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    -webkit-justify-content: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;

                    width: 200px;

                    .item{
                        display: flex;
                        width: 100%;
                        position: relative;
                        .el-image{
                            width: 100%;
                            height: auto;
                        }

                        .video{
                            cursor: pointer;
                        }
                        .video::after{
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: '视频';
                            width: 50px;
                            height: 20px;
                            background: #98000A;
                            color: #fff;
                            padding: 2px;
                        }
                    }

                }
            }
        }
    }
}
</style>
